<template>
  <div class="index">
    <!-- 为边框写的元素 -->
    <div class="footer"></div>
    <p>涉及行业</p>
    <div class="leftTopEchart"></div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { getIndustryData } from "@/api/echarts";
import { ref, onMounted } from "vue";
// 引入 Echarts
import * as echarts from "echarts";
import { ElMessage } from "element-plus";

const industryNumRef = ref([]); // 行业数量
const industryClassRef = ref([]); // 行业分类

/**
 * 请求数据
 */
const getData = async () => {
  let res = await getIndustryData();
  if (res.code == 0) {
    const {
      data: { industryClass, industryNum },
    } = res;
    industryClassRef.value = industryClass;
    industryNumRef.value = industryNum;
    initEcharts();
  } else {
    ElMessage.info(res.msg);
  }
};

/**
 * 初始化图表
 */
const initEcharts = () => {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.querySelector(".leftTopEchart"));
  // 绘制图表
  myChart.setOption({
    color: ["#3398DB"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: industryClassRef.value,
        axisTick: {
          alignWithLabel: true,
        },
        // X轴文字颜色
        axisLabel: {
          show: true,
          textStyle: {
            color: "rgba(255, 255, 255, 0.7)",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        // Y轴度量线
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(25, 186, 139, 0.17)",
          },
        },
        axisLine: {
          //Y轴轴线的颜色以及宽度
          show: true,
          lineStyle: {
            color: "rgba(25, 186, 139, 0.17)",
            width: 1,
            type: "solid",
          },
        },

        // y轴文字的配置
        axisLabel: {
          textStyle: {
            color: "rgba(255, 255, 255, 0.7)", //Y轴内容文字颜色
          },
        },
      },
    ],
    series: [
      {
        type: "bar",
        barWidth: "60%",
        data: industryNumRef.value,
        itemStyle: {
          normal: {
            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
            barBorderRadius: [5, 5, 0, 0],
          },
        },
      },
    ],
  });
  // 图表跟随浏览器自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};

onMounted(() => {
  getData();
});
</script>

<style scoped lang="scss"></style>
